<script setup lang="ts">
defineOptions({
  name: "mainProgressStatusItem"
});
import { ref, reactive, onMounted, inject, nextTick } from "vue";
import echartsCom from "@/views/common/components/echartsCom/index.vue";
import mainProgressStatusItemDetail from "./mainProgressStatusItemDetail.vue";

interface Props {
  data?: any | null;
  dark?: boolean;
}

const props = withDefaults(defineProps<Props>(), { dark: false });

const echartsComRef = ref<InstanceType<typeof echartsCom> | null>(null);
const options = ref<CommonEcharts.CommonEchartsOption | null>(null);
const isShowDetail = ref<boolean>(false);
const detailData = ref<Record<string, any>>(null);
const title = ref<string>("");
// 1 总功率  2 频率  3 用电情况(电流电压)
const type = ref<1 | 2 | 3 | 4>(1);
const mainKey = ref<string>("");

const showDetailHandler = async (item: any) => {
  detailData.value = null;
  const { mainKey: mainKey_ = "", mainName = "", type: type_ = "" } = item;
  if (!mainKey_ || !type.value) return;
  mainKey.value = mainKey_;
  switch (type_) {
    case "power":
      title.value = `${mainName} 总功率`;
      type.value = 1;
      break;
    case "frequency":
      title.value = `${mainName} 频率`;
      type.value = 2;
      break;
    case "current":
      title.value = `${mainName} 用电情况`;
      type.value = 4;
      break;
    case "voltage":
      title.value = `${mainName} 用电情况`;
      type.value = 3;
      break;
  }
  isShowDetail.value = true;
};

const init = () => {
  const {
    echartsData: {
      text,
      subtext,
      voltageSpecMin,
      voltageSpecMax,
      currentSpecMin,
      currentSpecMax,
      colorIndex1,
      colorIndex2,
      min,
      max,
      data,
      currentUnit
    }
  } = props.data;
  const commonTextStyle = {
    fontSize: 16,
    fontWeight: 600,
    align: "center"
  };
  const subTextStyle = {
    fontSize: 14,
    fontWeight: 600,
    align: "center"
  };
  const title = {
    show: true,
    text,
    subtext,
    textStyle: commonTextStyle,
    subtextStyle: subTextStyle,
    textAlign: "center",
    left: "48%",
    top: "71%",
    itemGap: 8
  };
  options.value = {
    title,
    tooltip: {
      show: true,
      formatter: function (params) {
        const title = `<span style=\"font-weight: 600;\">${subtext}</span>`;
        const v = `<span>电流实际值：<span style=\"font-weight: 600;\">${params.value} ${currentUnit}</span></span>`;
        const specMax = `<span>电流SPEC上限：<span>${currentSpecMax} ${currentUnit}</span></span>`;
        const specMin = `<span>电流SPEC下限：<span>${currentSpecMin} ${currentUnit}</span></span>`;
        return `${title}<br/>${v}<br/>${specMax}<br/>${specMin}<br/>`;
      },
      confine: true
    },
    series: [
      {
        type: "gauge",
        radius: "98%",
        center: ["50%", "50%"],
        min: 0,
        max: 660,
        axisLine: {
          lineStyle: {
            width: 8,
            color: [
              [colorIndex1, "#FFD360"], //#FFCA45FF
              [colorIndex2, "#34D399"], //#28D892FF
              [1, "#F87171"] //#fd666d
            ]
          }
        },
        pointer: {
          width: 4,
          itemStyle: {
            color: "auto"
          }
        },
        axisTick: {
          distance: 2,
          length: 4,
          lineStyle: {
            width: 2
          }
        },
        splitLine: {
          distance: 2,
          length: 8,
          lineStyle: {
            width: 2
          }
        },
        axisLabel: {
          color: "inherit",
          distance: 10,
          fontSize: 9,
          formatter: function (value) {
            return parseInt(value);
          }
        },
        splitNumber: 6,
        detail: {
          show: false
        },
        data
      }
    ]
  };
};

const updateOption = () => {
  init();
  echartsComRef.value.updateOption();
};

onMounted(() => {
  init();
});

defineExpose({
  updateOption
});
</script>

<template>
  <div class="main-progress-status-item">
    <div class="main-progress-status-echarts">
      <echartsCom ref="echartsComRef" :options="options" :dark="dark" />
    </div>
    <div class="main-progress-status-text">
      <div v-for="item in data.listData" :key="item.value" class="status-text-item">
        <div class="item-item item-top">
          <div class="label" :class="{ dark }">{{ item.label }}</div>
          <div v-if="item.icon && !dark" class="expecial">
            <component :is="item.icon" class="status-text-icon" @click="showDetailHandler(item)" />
          </div>
        </div>
        <div ref="ellipseTip" class="item-item item-bottom">
          <px-tooltip :disabled="!item.ellipseFlag" :content="item.value">
            <div class="expecial" :class="{ red: item.value == '异常' }">{{ item.value }}</div>
          </px-tooltip>
          <div class="default" :class="{ dark }">{{ item.unit }}</div>
        </div>
      </div>
    </div>
    <mainProgressStatusItemDetail v-if="isShowDetail" v-model="isShowDetail" :title="title" :type="type" :mainKey="mainKey" :data="detailData" />
  </div>
</template>

<style lang="scss" scoped>
.main-progress-status-item {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  height: 100%;

  .main-progress-status-echarts {
    flex: 1;
    height: 100%;
  }

  .main-progress-status-text {
    box-sizing: border-box;
    display: grid;
    flex-grow: 0;
    flex-shrink: 0;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    align-items: center;
    // flex: 1;
    width: 160px;
    height: 100%;
    // padding-top: 12px;
    padding-top: 30px;
    padding-bottom: 14px;

    .status-text-item {
      max-width: 80px;

      div {
        line-height: 1;
        white-space: nowrap;
      }

      .label {
        font-size: 14px;
        // font-weight: 600;
        color: #666;
      }

      .default {
        font-size: 12px;
        color: #555;
      }

      .expecial {
        overflow: hidden;
        font-size: 14px;
        font-weight: 600;
        color: var(--px-color-primary);
        text-overflow: ellipsis;
        white-space: nowrap;

        &.red {
          color: var(--px-color-danger);
        }
      }

      .status-text-icon {
        width: 14px;
        height: 14px;
        color: var(--px-color-primary);

        &:hover {
          color: var(--px-color-primary-light-3);
          cursor: pointer;
        }
      }

      .item-item {
        display: flex;
        gap: 2px;
        align-items: center;

        .dark {
          color: #fff !important;
        }
      }

      .item-top {
        gap: 4px;
      }

      .item-bottom {
        align-items: flex-end;
        margin-top: 8px;
      }
    }
  }
}
</style>
